<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Countdown Examples 2</title>

<!-- =========================================================== -->
<!-- COUNTDOWN NOTE: 
		When using more than one Countdown, 
		we recommend placing a reference 
		to the script once in HEAD -->
<!-- =========================================================== -->
<script src="countdown.js" type="text/javascript"></script>



</head>
<body style="background-color:#EDEDED">




<!-- =========================================================== -->
<p>Example 1 (flip clock)</p>
<!-- =========================================================== -->
<script type="application/javascript">
var myCountdown1 = new Countdown({
								 	time: 86400 * 3, // 86400 seconds = 1 day
									width:300, 
									height:60,  
									rangeHi:"day",
									style:"flip"	// <- no comma on last item!
									});

</script>



<!-- =========================================================== -->
<p>Example 2 (show only min and sec)</p>
<!-- =========================================================== -->
<script type="application/javascript">
var myCountdown2 = new Countdown({
									time: 300, 
									width:150, 
									height:80, 
									rangeHi:"minute"	// <- no comma on last item!
									});

</script>




<!-- =========================================================== -->
<p>Example 3 (stylized)</p>
<!-- =========================================================== -->
<script type="application/javascript">
var myCountdown4 = new Countdown({
								 	year: (new Date().getFullYear() + 1), 	// I'm cheating here... so I don't have to update this every year!
									//year: 2015, 							// This is what you would normally put in here... just a number for the year
									month:1, 
									day:1, 
									width:300, 
									height:40, 
									padding : 1.0, // Sets the text size to a percentage of the overall height. (I probably should have nemed this better.)
									numbers		: 	{
													font 	: "Arial",
													color	: "#FFFFFF",
													bkgd	: "#365D8B",
													fontSize : 200,
													rounded	: 0.15,				// percentage of size 
													shadow	: {
																x : 0,			// x offset (in pixels)
																y : 3,			// y offset (in pixels)
																s : 4,			// spread
																c : "#000000",	// color
																a : 0.4			// alpha	// <- no comma on last item!
																}
													},
									
									labels : {
												textScale : 0.8,
												offset : 5
											} // <- no comma on last item!
									
									});

</script>


</body>
</html>